<template>
  <div class="gird" :style="{paddingLeft:gutter}">
    <div
      id="girdChild"
      v-for="(item,index) in girdData"
      :key="index"
      :style="{paddingRight:gutter,marginBottom:gutterBottom, width: flexBasis}"
      :class="['gird-item', !border ? 'not-border' : '',
      ((index + 1) % columnNum === 0 || (index + 1) === girdData.length) && outBorder ? 'gird-item-last-col' : '',
      (Math.ceil((index + 1) / columnNum) === Math.ceil(girdData.length / columnNum)) && outBorder ? 'gird-item-last-row' : '']"
    >
      <slot name="content" :item="item" :index="index"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gird',
  components: {},
  props: {
    girdData: {
      type: Array,
      default: () => {
        return []
      }
    },
    columnNum: {
      type: Number,
      default: 4
    },
    gutter: {
      type: String,
      default: '0'
    },
    gutterBottom: {
      type: String,
      default: '0'
    },
    border: {
      type: Boolean,
      default: true
    },
    outBorder: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {}
  },
  computed: {
    flexBasis () {
      return 100 / this.columnNum + '%'
    }
    // lastCol (index) { // 每一行的最后一列
    //   return (index + 1) % this.columnNum === 0 || (index + 1) === this.girdData.length ? 'gird-item-last-col' : ''
    // },
    // lastRowAndNotFirstRow (index) { // 最后一行并且不是第一行
    //   let rownum = Math.ceil(this.girdData.length / this.columnNum)
    //   return Math.ceil(index + 1 / this.columnNum) === rownum && && Math.ceil((index + 1) / columnNum) > 1 ? 'gird-item-last-row' : ''
    // }
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.gird {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  .gird-item {
    box-sizing: border-box;
    &:not(.gird-item-last-col) { // 一行的最后一列
      border-right: 1px solid $--border_color;
    }
    &:not(.gird-item-last-row) { // 最后一行并且不是第一行
      border-bottom: 1px solid $--border_color;
    }
  }
  .not-border {
    border-right: 0px solid $--border_color !important;
    border-bottom: 0px solid $--border_color !important;
  }
}
</style>
